<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>配参管理用户登录</title>
        <script src="./lib/axios.js"></script>
        <script src="./lib/vue.js"></script>
        <link rel="stylesheet" href="./lib/elementindex.css">
        <script src="./lib/elementindex.js"></script>
        
        <style>
            .center{
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%); 
         }
        </style>
    </head>
    <body class='center'>
        <div id='app'>
            <el-card style='width: 400px;'>
                <div slot="header" style="text-align: center; font-size: large;">
                    <span>Easy Configuration</span>
                    
                </div>
                <!-- <span style="color: red;">内置默认账号：easy 密码：config</span> -->
                <el-form ref='loginform' :model='login' label-width="auto">
                    <el-form-item label="登录账号:" prop='username' :rules="[{
                                required: true,
                                message: '请输入登录账号,内置默认为easy',
                                trigger: 'blur'
                            }
                        ]">
                        <el-input v-model="login.username" placeholder="请输入登录账号,内置默认为easy"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码:" prop='password' :rules="[{
                                required: true,
                                message: '请输入登录密码,内置默认为config',
                                trigger: 'blur'
                            }
                        ]">
                        <el-input type="password" v-model="login.password" placeholder="请输入登录密码,内置默认为config" @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-checkbox type="checkbox" v-model="login.rememberMe" label="记住我"></el-checkbox>(30天)
                    </el-form-item>

                    <el-form-item label="">
                        <el-alert v-show='promptmsg' :title="promptmsg" type="error">
                        </el-alert>
                        <el-button style='margin-left: 40px; width: 120px;' type="primary" @click='handleLogin'> 登 录
                        </el-button>
                    </el-form-item>
            </el-card>
        </div>

        <script type='module'>
            let prefix = document && document.location.href.startsWith('http://127.0.0.1:8848') ? 'http://localhost/resources' : '.';
            
            window.vm = new Vue({
                el: '#app',
                data: {
                    login:{
                        username: '',
                        password: '',
                        rememberMe: true,
                    },
                    promptmsg:'',
                },
                methods: {
                    handleLogin: function() {
                        let self = this;
                        this.$refs['loginform'].validate((valid) => {
                            if (valid) {
                                doLogin();
                            } else {
                                self.promptmsg = '验证失败，请填写正确的登录信息。'
                                return false;
                            }
                        });
                        
                        function doLogin(){
                            axios.post(prefix+"/security-login",self.login)
                                .then(function(res) {
                                    if(res.data.error)
                                    {
                                        self.promptmsg = res.data.data;
                                        return;
                                    }
                                    document.location.href = '.'+"/home.html";
                                }).catch(function(ex) {
                                    self.promptmsg = ex;
                                });
                         };
                    },
                },
            });
            
        </script>
    </body>
</html>
